<template>
    <div id="header-nav">
        <div class="nav-container" :class="{'active':isMenuShow}">
            <ul class="list-unstyled">
                <li v-for="(item,index) in navData" :key="item.name">
                    <router-link v-if="item.children===null" :to="'/list/'+jumpUrl(item.name)" v-text="item.name"></router-link>
                    <a v-text="item.name" v-else href="javascript:;" :data-dropdown-id="item.name" :data-dropdown-index="index" :class="{'active':navActive==index}" @click.stop="setNav($event)"></a>
                </li>
            </ul>
        </div>

        <div v-for="(item,index) in navData" v-if="item.children!==null && navSubActive===item.name" :key="item.name" data-dropdown-id="Men" class="dropdown">
            <div class="dropdown-container clearfix">
                <div v-for="(subItem,i) in item.children" class="dropdown-item" :key="subItem.childrenName">
                    <ul class="list-unstyled subcategory-list" :class="{'active':navSubActiveIndex==i}">
                        <li class="subcategory">
                            <span v-text="subItem.childrenName"></span>
                            <i class="iphone-handle" :class="(navSubActiveIndex==i)?'icon-jian':'icon-jiahao'" @click.stop="setSubNav(i)"></i>
                        </li>
                        <li v-for="val in subItem.childrenArr" :key="val">
                            <router-link :to="{path:'/list/'+jumpUrl(val), query:{nav:item.name+'_'+subItem.childrenName}}" v-text="val"></router-link>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import mixin from '../../mixin'
import api from '../../http'
export default {
    mixins: [mixin],
    data() { //初始化导航栏目数据
        return {
            navActive: Number, //一级导航加当前active
            navSubActive: '', //输出对应的二级导航
            navSubActiveIndex: Number, //展开对应的二级导航
        }
    },
    props: ['isMenuShow', 'navData'],
    mounted() {
        // 点击空白处 导航隐藏
        document.addEventListener('click', (event) => {
            let target = event.target
            while (target && (!target.className || target.className !== 'dropdown') && target.className !== 'dropdown-item') {
                target = target.parentNode
            }
            if (!target || target.className !== 'dropdown') this.hiddMenu()
        })
    },
    methods: {
        // 展开一级导航
        setNav(evt) {
            this.$parent.isShowSearch = false
            this.navActive = evt.toElement.attributes['data-dropdown-index'].value // 获取要展开的导航位置
            this.navSubActive = evt.toElement.attributes['data-dropdown-id'].value // 获取要展开的导航id标识
            if (evt.target.className) {
                this.$router.push({ path: '/list/' + this.jumpUrl(evt.toElement.attributes['data-dropdown-id'].value) })
                this.hiddMenu()
            }
        },
        // 子导航展开
        setSubNav(index) {
            this.navSubActiveIndex = index
        },
        //隐藏导航
        hiddMenu() {
            this.navActive = Number
            this.navSubActive = ''
            this.navSubActiveIndex = Number
            this.$parent.isMenuShow = false
        }
    }
}
</script>
<style scoped>
.nav-container {
    position: absolute;
    left: 100px;
    height: 42px;
    -webkit-transform: scaleY(0);
    -ms-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: top;
    -ms-transform-origin: top;
    transform-origin: top;
    -webkit-overflow-scrolling: touch;
}

.nav-container::-webkit-scrollbar {
    display: none
}

.nav-container ul {
    width: 415px;
    -webkit-transform: translateX(15px);
    -ms-transform: translateX(15px);
    transform: translateX(15px);
}

.nav-container li {
    display: inline-block;
    height: 100%;
}

.nav-container li a {
    position: relative;
    display: block;
    height: 100%;
    padding: 0 10px;
    line-height: 42px;
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 300;
    text-transform: uppercase;
}

.nav-container li a.active:before {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 35px;
    margin: 0 auto;
    z-index: 1;
    display: inline-block;
    font-size: 30px;
    line-height: 3px;
    font-family: iconfont!important;
    content: "\e610";
}

.nav-container li a {
    color: #a9a9a9;
}

.nav-container li a[data-dropdown-id]:after {
    position: relative;
    top: -1px;
    margin-left: 5px;
    font-family: iconfont!important;
    content: "\e63d";
    font-weight: bold;
    font-size: 15px;
    vertical-align: middle;
}

.dropdown {
    width: 100%;
    background-color: #fff;
    box-shadow: 0 3px 5px -2px rgba(0, 0, 0, 0.5);
}

.dropdown.active {
    display: block;
}

.dropdown-container li.subcategory span {
    display: inline-block;
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
}

.subcategory-list a {
    display: block;
    margin-bottom: 10px;
    color: #575757;
    font-size: 12px;
    font-family: "Open Sans", sans-serif;
    font-weight: 300;
}

.subcategory-list a:hover {
    color: #000;
    text-decoration: underline;
}

.iphone-handle {
    display: none;
}

@media (max-width: 991px) {
    .nav-container.active {
        -webkit-transform: scaleY(1);
        -ms-transform: scaleY(1);
        transform: scaleY(1);
    }
    .nav-container {
        width: 100%;
        left: 0;
        top: 50px;
        height: 60px;
        background: #2E2E2E;
        z-index: 10;
    }
    .nav-container li a {
        line-height: 60px;
    }
    .dropdown {
        position: absolute;
        top: 110px;
        left: 0;
        z-index: 10;
    }
    .subcategory-list {
        background-color: #efefef;
    }
    .subcategory-list li {
        display: none;
    }
    .subcategory-list li.subcategory {
        display: block;
        position: relative;
        border-bottom: 1px solid #f1f1f1;
        padding: 24px 24px 24px 25px;
        background: #fff;
    }
    .subcategory-list a {
        padding: 5px 40px 0;
    }
    .subcategory-list.active {
        padding-bottom: 20px;
    }
    .subcategory-list.active li.subcategory {
        margin-bottom: 15px;
    }
    .subcategory-list.active li {
        display: block;
    }
    .iphone-handle {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        font-weight: bold;
    }
    .iphone-handle:before {
        position: absolute;
        right: 18px;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }
}

@media (max-width: 767px) {
    .nav-container {
        overflow-x: scroll;
        overflow-y: hidden;
    }
}

@media (min-width: 992px) {
    .nav-container {
        top: 0;
        -webkit-transform: scaleY(1);
        -ms-transform: scaleY(1);
        transform: scaleY(1);
        -webkit-transition: none;
        transition: none;
    }
    .dropdown {
        position: fixed;
        top: 42px;
        left: 0;
    }
    .dropdown-container {
        width: 90%;
        max-width: 1400px;
        padding: 40px 0;
        margin: 0 auto;
    }
    .dropdown-container .dropdown-item {
        float: left;
        width: 16.666%;
        max-width: 230px;
    }
    .dropdown-container li.subcategory span {
        margin-bottom: 15px;
    }
}
</style>
